<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\Orders */
/* @var $form yii\widgets\ActiveForm */
?>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://sslsharecircle.51yund.com/html/js/qiniu.js?v=2.1.8.27"></script>
<script type="text/javascript" src="https://sslsharecircle.51yund.com/html/js/plupload.full.min.js"></script>

<div class="orders-form">

    <?php $form = ActiveForm::begin(); ?>


    <div id="pictureContainer" style="position: relative">
    <div class="infor-list bottom-line add_pic" id="addPicture">
        <button type="button" class="btn btn-primary">点击上传图片</button>
        <p  id="certi-picture">点击上传（成功/失败）</p>
    </div>
    </div>
    <div id="activity_desc"></div>


    <?= $form->field($model, 'banner_image')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'notice')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'gotourl')->textInput(['maxlength' => true]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : '更新数据', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>






   




   


</div>
<script type="text/javascript">




/*global plupload */
/*global ActiveXObject */
/*exported Qiniu */
/*文件上传*/

function FileUploader(upButton, upContainer, source, urlDomain, vars){
    this._upButton = upButton;
    this._upContainer = upContainer;
    this._source = source;
    this._vars = vars;
    this._urlDomain = urlDomain;

    this._onFileStartUpload = function(){}
    this._onFileUploadProgress = function(){}
    this._onFileUploadFail = function(){}
    this._onFileUploadSuccess = function(){}
};

FileUploader.prototype.setSource = function(source){
    this._source = source;
}
FileUploader.prototype.setUrlDomain = function(domain){
    this._urlDomain = domain;
}
FileUploader.prototype.setFileStartUpload = function(callback){
    this._onFileStartUpload = callback;
}
FileUploader.prototype.setFileUploadProgress = function(callback){
    this._onFileUploadProgress = callback;
}
FileUploader.prototype.setFileUploadSuccess = function(callback){
    this._onFileUploadSuccess = callback;
}
FileUploader.prototype.setFileUploadFail = function(callback){
    this._onFileUploadFail = callback;
}

FileUploader.prototype.createFileUploader = function(){

    var onFileStartUpload = this._onFileStartUpload;
    var onFileUploadProgress = this._onFileUploadProgress;
    var onFileUploadFail = this._onFileUploadFail;
    var onFileUploadSuccess = this._onFileUploadSuccess;

    var source = this._source;

    //引入Plupload 、qiniu.js后
    var uploader = Qiniu.uploader({
        log_level:false,
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: this._upButton,       //上传选择的点选按钮，**必需**
        uptoken_url: '/basic/web/index.php?r=mobie/token',            //Ajax请求upToken的Url，**必需**（服务端提供）
        domain: this._urlDomain,   //bucket 域名，下载资源时用到，**必需**
        container: this._upContainer,           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '120kb',           //最大文件体积限制
        flash_swf_url: '/html/js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: this._upContainer,        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '120kb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        save_key: false,
        unique_names:false,
        multi_selection: false,
//            filters: {
//                mime_types : [
//                    { title : "Image files", extensions : "jpg,gif,png,jpeg" }
//                ]
//            },
        x_vars:this._vars,
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    //文件添加进队列后,处理相关的事情

                });
            },
            'BeforeUpload': function(up, file) {
                onFileStartUpload();
            },
            'UploadProgress': function(up, file) {
                //每个文件上传时,处理相关的事情
//                    file.percent;   //上传百分比
//                    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));  //上传大小
//                    up.total.bytesPerSec;   //上传速度
                var progress = file.percent;
                if(progress > 100){
                    progress = 100;
                }
                onFileUploadProgress(progress);
            },
            'FileUploaded': function(up, file, info) {
                //每个文件上传成功后,处理相关的事情
                //其中 info 是文件上传成功后，服务端返回的json，形式如
                // {
                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                //    "key": "gogopher.jpg"
                //  }
                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
            },
            'Error': function(up, err, errTip) {
                //上传出错时,处理相关的事情
                onFileUploadFail(-1, errTip);
            },
            'UploadComplete': function() {
                onFileUploadSuccess(Qiniu.getPhotoId());

                //队列文件处理完毕后,处理相关的事情
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "/basic/web/index.php?r=mobie/token",
                    beforeSend: function(XMLHttpRequest){
                        //ShowLoading();
                    },
                    success: function(res) {
                        var photoId = res.photo_id;
                        Qiniu.token = res.uptoken;

                        Qiniu.setPhotoId(photoId);
                    },
                    complete: function(XMLHttpRequest, textStatus){
                        //HideLoading();
                    },
                    error: function(){
                        //请求出错处理
                    }
                });
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = Qiniu.getPhotoId() + ".jpg";
                // do something with key here
                return key
            }
        }
    });
};







 $(document).ready(function(){
     
   
        constructFileUploaderV2();


    });


var source  = "city_activity";
var url_domain  = "http://sport-album.qiniudn.com/";
var uploadType = 1;
 function constructFileUploaderV2(){
            //页面上传
            
                var vars = new Object();
                var uploader = new FileUploader("addPicture","pictureContainer",source,url_domain,vars);
                uploader.setFileStartUpload(onFileStartUpload);
                uploader.setFileUploadProgress(onFileUploadProgress);
                uploader.setFileUploadFail(onFileUploadFail);
                uploader.setFileUploadSuccess(onFileUploadSuccess);
                uploader.createFileUploader();
            

//            setTimeout(function(){
//                $("#pictureContainer").attr("style","");
//            },1000);
        }
        /******************************************/
        /*******begin*********android客户端上传图片回调信息********begin*************/
        function onFileStartUpload(){
            uploadFileImg = true;
            //每个文件上传前,处理相关的事情
            showProgress();
        }

        function onFileUploadProgress(progress){
            setProgress(progress);
        }

        function onFileUploadSuccess(photoId){
            if(cancelUpload){
                cancelUpload = false;
            }else{
                facePhotoId = photoId;
            }
            uploadFileImg = false;

            hideProgress();

            if (uploadType == 1){
                $.ajax({
                    type: 'get',
                    dataType: 'json',
                    data:{"filename": photoId + ".jpg", "source":source},
                    url: "/basic/web/index.php?r=mobie/imageurl&filename="+photoId+"&source="+source,
                    beforeSend: function(XMLHttpRequest){
                        //ShowLoading();
                    },
                    success: function(res) {
                        var originUrl = res.origin_url;
                        $("#activity_desc").empty();
                        $("#activity_desc").append("<img src="+originUrl+" class='inner-img'/> </br>");
                        $("#banner-banner_image").val(originUrl);
                    },
                    complete: function(XMLHttpRequest,textStatus){
                    },
                    error: function(){
                        //请求出错处理
                    }
                });
            }
//            setTimeout(function(){
//                $("#pictureContainer").attr("style","");
//            },1000);
            $("#certi-picture").attr('placeholder','上传成功');
        }


        function onFileUploadFail(code, msg){
            if(cancelUpload){
                var errTip = msg;
                if("" == errTip){
                    errTip = "上传失败，请稍后重试或联系客服";
                }

                showToastInfo("",errTip);
            }
            cancelUpload = false;

            hideProgress();

            uploadFileImg = false;
//            setTimeout(function(){
//                $("#pictureContainer").attr("style","");
//            },1000);
            $("#certi-picture").attr('placeholder','失败,请重试或联系客服');
        }

        function showProgress(){
            $("#progress_info").show();
        }

        function hideProgress(){
            $("#progress_info").hide();
        }

        function setProgress(value){
            if(!value){
                value = 0;
            }

            if(value < 0){
                value = 0;
            }

            if(value > 100){
                value = 100;
            }
            value = parseInt(value);
            $("#progress_bar").css("width", value + "%");
            $("#progress_val").html(value + "%");
        }

    var cancelUpload = false;
    function onCancelUpload(){
        cancelUpload = true;
        hideProgress();
    }
    /******end**********android客户端上传图片回调信息*********end************/



 </script>
